<template>
  <div class="index">
    <div class="index-header">
      <el-menu default-active="/" router  mode="horizontal" @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-submenu index="workspace">
          <template slot="title">我的工作台</template>
          <el-menu-item index="test">测试</el-menu-item>
          <el-menu-item index="adapter">适配</el-menu-item>
          <el-menu-item index="tree">树结构增删改查</el-menu-item>
          <el-menu-item index="qrcode">二维码测试</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <!-- 后续更改为动态路由配置 -->
    <div class="index-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(a,b,v){
      console.log(a,b,v);
    }
  },
};
</script>

<style scoped lang="less">
@navHeigh:60px;
.index {
  width: 100%;
  height: 100vh;

  &-header {
    width: 100%;
    height: @navHeigh;
  }
  &-content {
    height: calc(100vh - @navHeigh);
    overflow: auto;
    background-color: pink;
  }
}

</style>
